<template>
	<view>
		<nav-bar color="#000000" bgc="#ffffff" bbtn>订单详情</nav-bar>
		<!-- 倒计时 -->
		<view class="size"></view>
		<view class="timer" v-if="data.status == 0">
			<text>请在</text>
			<text class="time">{{m}}分{{s}}秒</text>
			<text>内完成支付，否则取将自动取消订单</text>
		</view>
		<!-- 用户信息 -->
		<view class="section-1" v-if="data.type==1">
			<view class="img">
				<image src="../../static/image/order/icon_yuyueren@3x.png" mode=""></image>
			</view>
			<view class="message">
				<view class="name">预约人：{{data.name}}</view>
				<view class="mobile">电话：{{data.mobile}}</view>
			</view>
			<view :class="{'status':(data.status==0||data.status==1||data.status==2)?true: false, 'status-cancel':(data.status==9||data.status==10)?true: false, 'status-over':(data.status==3||data.status==6)?true: false, 'status-ing':(data.status==5||data.status==2)?true: false}">{{statusArr1[ data.status ]}}</view>
		</view>
		<view class="section-1" v-if="data.type==2">
			<view class="img">
				<image src="../../static/image/order/icon_yuyueren@3x.png" mode=""></image>
			</view>
			<view class="message">
				<view class="name">{{data.name}} {{data.mobile}}</view>
				<view class="address">{{data.address}}</view>
			</view>
			<view :class="{'status':(data.status==0||data.status==1||data.status==2)?true: false, 'status-cancel':(data.status==9||data.status==10)?true: false, 'status-over':(data.status==3||data.status==6)?true: false, 'status-ing':(data.status==5||data.status==2)?true: false}">{{statusArr2[ data.status ]}}</view>
		</view>
		<!-- 平台审核 -->
		<view class="section-8" v-if="data.status==5||data.status==6">
			<view class="img">
				<image src="../../static/image/order/icon_shenghezhong@3x.png" mode=""></image>
			</view>
			<view class="message">
				<view class="name" v-if="data.status==5&&data.service_status==1">平台审核中</view>
				<view class="name" v-if="data.status==5&&data.service_status==2&&data.type==1" @click="getServiceProgress">售后进行中</view>
				<view class="name" v-if="data.status==5&&data.service_status==2&&data.type==2&&data.submit_post_time" @click="getServiceProgress">售后进行中</view>
				<view class="name" v-if="data.status==5&&data.service_status==2&&data.type==2&&!data.submit_post_time" @click="submitPost">上传物流单号</view>
				<view class="name" v-if="data.status==6" @click="getServiceProgress">售后完成</view>
				<view class="name" v-if="data.status==2&&data.type==2">查看物流</view>
			</view>
			<view class="img">
				<image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode="" v-if="data.status==5&&data.service_status==2&&data.type==1"
				 @click="getServiceProgress"></image>
				<image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode="" v-if="data.status==5&&data.service_status==2&&data.type==2&&data.submit_post_time"
				 @click="getServiceProgress"></image>
				<image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode="" v-if="data.status==5&&data.service_status==2&&data.type==2&&!data.submit_post_time"
				 @click="submitPost"></image>
				<image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode="" v-if="data.status==5&&data.service_status==1&&data.type==2"
				 @click="getServiceProgress"></image>
			</view>
		</view>
		<!-- 待收货 -->
		<view class="section-8" v-if="data.status==2">
			<view class="img">
				<image src="../../static/image/order/icon_yfh@3x.png" mode=""></image>
			</view>
			<view class="message">
				<view class="name">{{post_time}}</view>
				<view class="name">{{post_speed}}</view>
			</view>
			<view class="img">
				<image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode="" @click="getPostProgress"></image>
			</view>
		</view>
		<!-- 商品详情 -->
		<shop-lst v-if="data.type==1" :param="data" :listStyle="2"></shop-lst>
		<shop-lst v-if="data.type==2" :param="data" :listStyle="1"></shop-lst>

		<!-- 电子券码 -->
		<view class="section-6" v-if="data.type==1&&data.status!=0&&data.status!=10">
			<view class="title">
				<text>电子券码</text>
				<text>{{data.coupon.length}}张</text>
			</view>
			<view class="content">
				<view class="contentLeft">
					<view class="num" v-for="(item, i) in data.coupon.slice(0, 3)" :class="{used: item.status==1||data.status==9?true:false}"
					 :key="i">{{item.coupon_no}}</view>
					<view class="more-coupon" v-if="data.coupon.length > 3" @click="lookMore">查看更多</view>
				</view>
				<view class="contentRight">
					<view class="qrcode"><canvas canvas-id="qrcode" style="width: 100%;height: 100%;" /></view>
					<text>扫码可核销全部代码</text>
				</view>
			</view>
		</view>
		<!-- 地址信息 -->
		<view class="section-2" v-if="data.type==1">
			<view class="img">
				<image src="../../static/image/order/icon_dzz@3x.png" mode=""></image>
			</view>
			<view class="address"><text>{{data.shop_address||'无'}}</text></view>
			<view class="mobile" @click="makePhone">
				<image src="../../static/image/order/icon_diha@3x.png" mode=""></image>
			</view>
		</view>
		<!-- 套餐说明 -->
		<view class="section-3">
			<view class="title">套餐说明</view>
			<view class="content">
				<view class="buyTime">
					<text>1、抢购日期：</text>

					<text v-if="data">{{data.goods.buy_starttime}}~{{data.goods.buy_endtime}}</text>
				</view>
				<view class="useTime">
					<text>2、使用日期：</text>
					<text>{{data.goods.use_starttime||''}}~{{data.goods.use_endtime||''}}</text>
				</view>
				<view class="packageContent">
					<text>3、套餐内容：</text>
					<rich-text :nodes="data.spec.content"></rich-text>
				</view>
				<view class="packageTips">
					<text>4、套餐提示：</text>
					<text></text>
				</view>
			</view>
		</view>
		<!-- 订单时间 -->
		<view class="section-4">
			<view class="orderTime">
				<text>下单时间：</text>
				<text>{{data.add_time}}</text>
			</view>
			<view class="orderId">
				<text>订单编号：</text>
				<text>{{data.order_no}}</text>
				<text @click="copyOrderNo(data.order_no)">复制</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="section-5">
			<!-- 支付/取消按钮 -->
			<view class="payBtn" v-if="data.status==0">
				<view class="cancleOrder" @click="cancelPay()">取消订单</view>
				<view class="surePay" @click="pay">立即支付</view>
			</view>

			<!-- 确认收货 -->
			<view class="serviceBtn" @click="confirmReceive" v-if="data.status==2&&data.type==2">确认收货</view>
			<!-- 售后按钮 -->
			<view class="serviceBtn" @click="goToOrderService" v-if="data.is_bargain_price==2&&data.status==1&&data.type==1">申请售后</view>
			<view class="serviceBtn" @click="goToOrderService" v-if="data.is_bargain_price==2&&data.type==2&&(data.status==1||(data.status==3&&data.rake_back_status==2))">申请售后</view>
			<!-- 联系客服 -->
			<view class="callBtn" v-if="data.status==5" @click="contact">联系客服</view>
			<view class="feedbackBtn" v-if="data.status==3&&!data.evaluate_time" @click="feedback">反馈体验</view>
			<view class="deleteBtn" v-if="data.status==10" @click="deleteOrder">删除订单</view>
			<view class="onceMoreBtn" v-if="data.status==9||data.status==10||data.status==3||data.status==6">再来一单</view>

		</view>
		<dialogview v-show="dialogFlag" @cancel="cancel" @confirm="confirm" :param="dialogView"></dialogview>
		<!-- 更多券码弹窗 -->
		<view class="section-7" v-if="data.type==1" v-show="section7">
			<view class="motal">
				<view class="closeBtn" @click="closeMore">关闭</view>
				<text v-for="(item, i) in data.coupon" :key="i">{{item.coupon_no}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	import dialogview from "../../components/dialogView.vue" //弹窗组件
	import shopLst from '@/components/shopLst'; //订单组件
	export default {
		components: {
			dialogview,
			shopLst
		},
		data() {
			return {
				section7: false, //券码弹窗是否展示
				data: {},
				id: 0,
				lastStatus: 0, //列表页订单状态
				m: 0, //剩余分钟
				s: 0, //剩余秒
				rest_time: 0,
				statusArr1: {
					"0": "待付款",
					"1": "待使用",
					"2": "待收货",
					"3": "已完成",
					"5": "售后中",
					"6": "已退款",
					"9": "已过期",
					"10": "已取消"
				},
				statusArr2: {
					"0": "待付款",
					"1": "待发货",
					"2": "待收货",
					"3": "已完成",
					"5": "售后中",
					"6": "已退款",
					"9": "已过期",
					"10": "已取消"
				},
				coupons: [],
				dialogView: {
					style: 0, // 弹出框的样式： 0 1 2
					title: '提示', //弹出层的标题
					content: '确定要这样做吗确定要这样做吗确定要这样做吗确定要这样做吗？', //弹出层的内容
					cancelText: '取消', //取消按钮的文本
					confirmText: '确认', //确认按钮的文本
					data: {
						code: 1000
					}
				},
				dialogFlag: false,
				post_time: '', //待收货时的物流最新时间
				post_speed: '商品已发货', //待收货时的最新物流进度
			};
		},
		methods: {
			make(id) {
				console.log(id);
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: id,
					// size: 90,
					success: res => {
						console.log(res)
					}
				})
			},
			//确认收货弹窗
			confirmReceive() {
				this.dialogView = {
					style: 0, // 弹出框的样式： 0 1 2
					title: '提示', //弹出层的标题
					content: '确定已收到当前订单商品？', //弹出层的内容
					cancelText: '暂不', //取消按钮的文本
					confirmText: '确定', //确认按钮的文本
					data: {}
				}
				this.confirm = this.confirmReceiveDo;
				this.dialogFlag = true;
			},
			//确认收货操作
			confirmReceiveDo() {
				let _this = this
				this.ajaxJson('confirmReceive', {
					id: this.id
				}, res => {
					uni.showToast({
						title: '收货成功',
						icon: 'none',
						duration: 2000,
						success() {
							_this.dialogFlag = false
						}
					});
					this.getData();
				});
			},

			//物流跟踪
			getPostProgress() {
				uni.navigateTo({
					url: 'orderLogistics?no=' + this.data.post_no + '&name=' + this.data.post_company
				})
			},
			//查看更多
			lookMore() {
				console.log(111111);
				this.section7 = true
			},
			//关闭更多
			closeMore() {
				this.section7 = false
			},
			//立即支付
			pay() {
				uni.navigateTo({
					url: 'payment?id=' + this.id + "&amount=" + this.data.amount
				})
			},
			//售后进度
			getServiceProgress() {
				uni.navigateTo({
					url: "orderServiceSpeed?id=" + this.id
				})
			},
			//上传物流
			submitPost() {
				uni.navigateTo({
					url: 'submit_post?id=' + this.id
				})
			},
			// 联系客服
			contact: function() {
				this.dialogView = {
					style: 0, // 弹出框的样式： 0 1 2
					title: '提示', //弹出层的标题
					content: '客服电话:' + this.data.platform_phone, //弹出层的内容
					cancelText: '取消', //取消按钮的文本
					confirmText: '拨打', //确认按钮的文本
					data: this.data
				}
				this.confirm = this.boda;
				this.dialogFlag = true;
			},
			// 拨打电话
			boda: function() {
				console.log("确认拨打电话");
				uni.makePhoneCall({
					phoneNumber: String(this.data.platform_phone)
				})
				this.dialogFlag = false
			},
			// 确认取消订单
			cancelPayConfirm: function(item) {
				let cancelData = {
					id: this.id
				}
				let _this = this
				this.ajaxJson('cancelOrder', cancelData, res => {
					console.log(12122121212);
					uni.showToast({
						title: '订单取消成功',
						icon: 'none',
						duration: 2000,
						success() {
							_this.lastStatus = 10
							_this.getData();
							_this.dialogFlag = false
						}
					});

				});
			},
			// 取消支付弹窗
			cancelPay: function() {
				this.dialogView = {
					style: 0, // 弹出框的样式： 0 1 2
					title: '提示', //弹出层的标题
					content: '确定取消当前订单？', //弹出层的内容
					cancelText: '暂不', //取消按钮的文本
					confirmText: '确定', //确认按钮的文本
					data: this.data
				}
				this.confirm = this.cancelPayConfirm
				this.dialogFlag = true;
			},
			//取消删除
			cancel: function() {
				this.dialogFlag = false;
			},
			// 跳转反馈页面
			feedback: function() {
				uni.navigateTo({
					url: "./orderFeedback?id=" + this.id
				})
			},
			// 删除订单
			deleteOrder: function() {
				this.dialogView = {
					style: 0, // 弹出框的样式： 0 1 2
					title: '提示', //弹出层的标题
					content: '确定删除当前订单？', //弹出层的内容
					cancelText: '暂不', //取消按钮的文本
					confirmText: '确定', //确认按钮的文本
					data: this.data
				}
				this.confirm = this.delOrder;
				this.dialogFlag = true;
			},
			// 确认删除订单
			delOrder: function(item) {
				let delData = {
					id: this.id
				}
				this.ajaxJson('delOrder', delData, res => {
					uni.showToast({
						title: '删除成功',
						icon: 'none',
						duration: 2000,
						success() {
							uni.redirectTo({
								url: "order"
							})
						}
					});
					this.allList();
					this.dialogFlag = false
				});
			},
			//复制订单号
			copyOrderNo(no) {

			},
			confirm: function() {

			},
			//店家电话
			makePhone() {
				uni.makePhoneCall({
					phoneNumber: this.data.shop_phone
				})
			},
			//跳转售后
			goToOrderService: function() {
				uni.navigateTo({
					url: 'orderService?id=' + this.id
				});
			},
			//获取数据
			getData() {
				let cancelData = {
					id: this.id
				}
				this.ajaxJson('orderDetail', cancelData, res => {
					this.data = res
					console.log(this.data);

					//待收货状态获取最新物流信息
					if (this.data.status == 2) {
						this.post_time = this.data.send_time
						if (this.data.post && this.data.post.status == '0' && this.data.post.result && this.data.post.result.list.length >
							0) {
							this.post_time = this.data.post.result.list[0].time
							this.post_speed = this.data.post.result.list[0].status
						}
					}
					
					//如已失效则toast提示：“订单已超时取消”，并回到列表页，状态变更为已取消
					if (this.lastStatus == 0 && this.data.status == 10) {
						return uni.showToast({
							title: "订单已超时取消",
							duration: 2000,
							success() {
								uni.redirectTo({
									url: "order"
								})
							}
						})
					}
					//如过期则toast提示：“使用时间已过期”，并返回列表，状态变更为已过期
					if (this.lastStatus == 1 && this.data.status == 9) {
						return uni.showToast({
							title: "使用时间已过期",
							duration: 2000,
							success() {
								uni.redirectTo({
									url: "order"
								})
							}
						})
					}
					if (this.data.status == 0) {
						//订单支付倒计时
						this.rest_time = this.data.rest_time
						let nowRest = this.data.rest_time
						for (let i = 0; i < 60; i++) {
							if (nowRest > 60) {
								this.m++
							} else {
								this.s = nowRest
							}
							nowRest = nowRest - 60
						}
						let restTimeInter = setInterval(() => {
							this.data.rest_time--;
							if (this.m <= 0 && this.s <= 0) {
								clearInterval(restTimeInter)
								//订单超时
								return uni.showToast({
									title: "订单已超时取消",
									duration: 2000,
									success() {
										uni.redirectTo({
											url: "order"
										})
									}
								})
							}
							if (this.s <= 0) {
								this.m--
								this.s = 59
							} else {
								this.s--
							}
						}, 1000)
					}
					if( this.data.type == 1 ){
						this.make(this.id)
					}
				});
			}
		},
		onShow() {
			this.getData()
			console.log(this.id);
			console.log(this.lastStatus);
		},
		onLoad(options) {
			this.id = options.id
			this.lastStatus = options.status


		}
	};
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		font-size: 0.75rem;
		box-sizing: border-box;
	}

	.size {
		width: 100%;
		height: 80rpx;
	}

	page {
		background: #F4F4FA;
		margin-bottom: 160rpx;
	}

	.timer {
		// margin-top: 80rpx;
		padding: 20rpx;
		background-color: #4e5366;
		color: #ffffff;
		text-align: center;
	}

	.section-1 {
		width: 92%;
		margin: 50rpx auto 0;
		padding: 40rpx 20rpx;
		margin-top: 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.message {
			display: flex;
			flex-direction: column;

			.mobile {
				color: #aaaaaa;
			}
		}

		.address {
			color: #AAAAAA;
		}

		.status {
			color: #fd6431;
			margin-left: auto;
		}

		.status-cancel {
			color: #DADAE3;
			margin-left: auto;
		}

		.status-over {
			color: #4E5366;
			margin-left: auto;
		}

		.status-ing {
			color: #FFC80B;
			margin-left: auto;
		}
	}


	.section-2 {
		width: 92%;
		margin: 50rpx auto 0;
		padding: 40rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.address {
			width: 70%;
		}

		.mobile {
			width: 50rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}

			margin-left: auto;
		}
	}

	.section-3 {
		width: 92%;
		margin: 50rpx auto 0;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.content {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			color: #aaaaaa;

			.buyTime,
			.useTime,
			.packageContent,
			.packageTips {
				margin-bottom: 15rpx;

				text {
					margin-right: 30rpx;
				}
			}
		}
	}

	.section-4 {
		width: 92%;
		margin: 50rpx auto 30rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		color: #aaaaaa;

		.orderTime,
		.orderId {
			text {
				margin-right: 30rpx;
			}
		}

		.orderId {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 20rpx;

			text:last-child {
				border: 1px #fe895e solid;
				padding: 5rpx 20rpx;
				margin-left: auto;
				color: #fe895e;
				border-radius: 20rpx;
			}
		}
	}

	.section-5 {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 0 30rpx;
		justify-content: center;

		// 支付按钮
		.payBtn {
			width: 92%;
			margin: 50rpx auto;
			height: 88rpx;
			border-radius: 50rpx;
			box-shadow: 0 0 10rpx #b93306;
			display: flex;
			justify-content: space-around;
			overflow: hidden;

			.cancleOrder {
				width: 50%;
				background-color: #ffffff;
				text-align: center;
				line-height: 88rpx;
			}

			.surePay {
				width: 50%;
				background: linear-gradient(to right, #fd6431, #ff9972);
				text-align: center;
				line-height: 88rpx;
				color: #ffffff;
			}
		}

		// 售后按钮
		.serviceBtn {
			width: 300rpx;
			height: 88rpx;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(253, 100, 49, 1);
			box-shadow: 0px 1px 20rpx 0px rgba(185, 51, 6, 0.3);
			border-radius: 44rpx;
			margin: 0 auto;
			color: #FD6431;
			text-align: center;
			line-height: 88rpx;
			font-size: 34rpx;
			margin-right: 75rpx;
		}

		//联系客服按钮
		.callBtn {
			width: 300rpx;
			margin: 0 auto;
			height: 88rpx;
			border-radius: 50rpx;
			color: #ffffff;
			text-align: center;
			line-height: 88rpx;
			font-size: 34rpx;
			background: linear-gradient(to right, #fd6431, #ff9972);
		}

		.feedbackBtn,
		.deleteBtn,
		.onceMoreBtn {
			width: 300rpx;
			height: 88rpx;
			border-radius: 50rpx;
			line-height: 88rpx;
			font-size: 34rpx;
			text-align: center;
		}

		.feedbackBtn,
		.deleteBtn {
			background-color: #ffffff;
			color: #fd6431;
			box-shadow: 0 0 10rpx #b93306;
			margin-right: 75rpx;
		}

		.onceMoreBtn {
			background: linear-gradient(to right, #fd6431, #ff9972);
			color: #ffffff;
		}
	}

	.section-6 {
		width: 92%;
		margin: 50rpx auto 0;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.contentLeft {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.num {
				padding: 10rpx 20rpx;
				background-color: #f4f4f4;
				margin-top: 10rpx;
				color: #666666;
			}

			.more-coupon {
				color: #FD6431;
				line-height: 1;
				margin-top: 24rpx;
			}

			.used {
				text-decoration: line-through;
				color: #DADAE3;
			}
		}

		.contentRight {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-left: 1px #aaaaaa solid;

			.qrcode {
				width: 180rpx;
				height: 180rpx;
			}

			text {
				color: #666666;
				margin-top: 10rpx;
			}
		}
	}

	.section-7 {
		// display: none; //更多券码弹窗
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);

		.motal {
			width: 70%;
			// height: 500rpx;
			padding: 60rpx 20rpx;
			border-radius: 20rpx;
			position: relative;
			margin: 500rpx auto 0;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			background: #ffffff;

			text {
				padding: 10rpx;
				width: 48%;
				margin-top: 10rpx;
				background-color: #f4f4f4;
			}

			.closeBtn {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
			}
		}
	}

	.section-8 {
		width: 92%;
		margin: 50rpx auto 0;
		padding: 40rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.message {
			width: 70%;
			color: #1D1E21;
		}

		.img:last-child {
			margin-left: auto;
			margin-right: 20rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.img:last-child {
		margin-left: auto;
		margin-right: 20rpx;
		width: 30rpx;
		height: 30rpx;
	}
</style>
